<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
    <th:block th:include="include :: head('消息与提示')" />
</head>
<body>
<body>

    <div class="app-title">
        <div class="div">
            <h1><i class="fa fa-laptop"></i> 提示与消息</h1>
            <p>自动消失与确认</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">Bootstrap Elementsdddd</a></li>
        </ul>
    </div>
    <!-- Buttons-->
    <div class="tile mb-4">
        <div class="page-header">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="mb-3 line-head" id="buttons">tip messages</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 0', {icon: 0})">layer icon 0</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 1', {icon: 1})">layer icon 1</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 2', {icon: 2})">layer icon 2</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 3', {icon: 3})">layer icon 3</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 4', {icon: 4})">layer icon 4</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 5', {icon: 5})">layer icon 5</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 6', {icon: 6})">layer icon 6</button>
                    <button class="btn btn-primary" type="button" onclick="layer.msg('layer msg with icon 7', {icon: 7})">layer icon 7</button>
                </p>
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="$.alertMsg.msg('tip msg normal with icon type', 'success')">tips normal with icon type</button>
                    <button class="btn btn-primary" type="button" onclick="$.alertMsg.msg('tip msg normal without icon type')">tips normal without icon type</button>
                </p>
                <p class="bs-component">

                    <button class="btn btn-info" type="button" onclick="$.alertMsg.msgSuccess('tip msgSuccess')">tip msgSuccess</button>
                    <button class="btn btn-warning" type="button" onclick="$.alertMsg.msgWarning('tip msgWarning')">tip msgWarning</button>
                    <button class="btn btn-danger" type="button" onclick="$.alertMsg.msgError('tip msgError')">tip msgError</button>
                </p>
                <p class="bs-component">
                    <button class="btn btn-primary" type="button" onclick="$.alertMsg.alert('alert normal with icon type', 'success')">alert with icon type</button>
                    <button class="btn btn-primary" type="button" onclick="$.alertMsg.alert('alert normal without icon type')">alert without icon type</button>
                </p>

                <p class="bs-component">
                    <button class="btn btn-outline-success" type="button" onclick="$.alertMsg.alertSuccess('alert alertSuccess')">alertSuccess</button>
                    <button class="btn btn-outline-warning" type="button" onclick="$.alertMsg.alertWarning('alert alertWarning')">alertWarning</button>
                    <button class="btn btn-outline-danger" type="button" onclick="$.alertMsg.alertError('alert alertError')">alertError</button>
                </p>
            </div>
        </div>
    </div>

    <div th:replace="include :: footer"></div>
    <script th:src="@{/static/oldtoys/js/alertMsg.js}"></script>
    <!-- The javascript plugin to display page loading on top-->
    <!--<script src="js/plugins/pace.min.js"></script>-->
    <!-- Page specific javascripts-->
    <script>
        $('.bs-component [data-toggle="popover"]').popover();
        $('.bs-component [data-toggle="tooltip"]').tooltip();
    </script>

</body>
</html>